<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="card-header clearfix">
        <h5 class="title pull-left">医生基本信息</h5>
        <el-button
          type="text"
          icon="el-icon-edit"
          size="small"
          class="btn pull-right"
          @click="toScheduleEdit"
        >编辑</el-button>
      </div>
      <div class="card-wrapper">
        <el-row>
          <el-col :span="8"><strong>医生姓名：</strong>{{ renderData.name }}</el-col>
          <el-col :span="8"><strong>医生角色：</strong>{{ renderData.role }}</el-col>
          <el-col :span="8"><strong>VeevaCode：</strong>{{ renderData.veevaCode }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="8"><strong>医院：</strong>{{ renderData.hospital }}</el-col>
          <el-col :span="8"><strong>科室：</strong>{{ renderData.department }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="8"><strong>职称：</strong>{{ renderData.rank }}</el-col>
          <el-col :span="8">
            <strong>性别：</strong>
            <el-tag
              v-if="renderData.sex === 0"
              effect="plain"
            >女</el-tag>
            <el-tag
              v-else-if="renderData.sex === 1"
              effect="plain"
            >男</el-tag>
            <el-tag
              v-else
              effect="plain"
              type="info"
            >暂无</el-tag>
          </el-col>
          <el-col :span="8"><strong>联系电话：</strong>{{ renderData.phone }}</el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card mt30">
      <div slot="header" class="card-header clearfix">
        <h5 class="title pull-left">出发行程信息</h5>
      </div>
      <div class="meeting-info">
        <el-row>
          <el-col :span="12"><strong>交通方式：</strong>{{ renderData.tripMode0 }}</el-col>
          <el-col :span="12"><strong>航班号/火车号：</strong>{{ renderData.tripNo0 }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="8"><strong>出发省份：</strong>{{ renderData.outProvince0 }}</el-col>
          <el-col :span="8"><strong>出发城市：</strong>{{ renderData.outCity0 }}</el-col>
          <el-col :span="8"><strong>出发站：</strong>{{ renderData.outStation0 }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="8"><strong>到达省份：</strong>{{ renderData.inProvince0 }}</el-col>
          <el-col :span="8"><strong>到达城市：</strong>{{ renderData.inCity0 }}</el-col>
          <el-col :span="8"><strong>到达站：</strong>{{ renderData.inStation0 }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="12"><strong>出发时间：</strong>{{ renderData.outTime0 }}</el-col>
          <el-col :span="12"><strong>抵达时间：</strong>{{ renderData.inTime0 }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="24"><strong>其他备注：</strong>{{ renderData.remark0 }}</el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card mt30">
      <div slot="header" class="card-header clearfix">
        <h5 class="title pull-left">返回行程信息</h5>
      </div>
      <div class="meeting-info">
        <el-row>
          <el-col :span="12"><strong>交通方式：</strong>{{ renderData.tripMode1 }}</el-col>
          <el-col :span="12"><strong>航班号/火车号：</strong>{{ renderData.tripNo1 }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="8"><strong>出发省份：</strong>{{ renderData.outProvince1 }}</el-col>
          <el-col :span="8"><strong>出发城市：</strong>{{ renderData.outCity1 }}</el-col>
          <el-col :span="8"><strong>出发站：</strong>{{ renderData.outStation1 }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="8"><strong>到达省份：</strong>{{ renderData.inProvince1 }}</el-col>
          <el-col :span="8"><strong>到达城市：</strong>{{ renderData.inCity1 }}</el-col>
          <el-col :span="8"><strong>到达站：</strong>{{ renderData.inStation1 }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="12"><strong>出发时间：</strong>{{ renderData.outTime1 }}</el-col>
          <el-col :span="12"><strong>抵达时间：</strong>{{ renderData.inTime1 }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="24"><strong>其他备注：</strong>{{ renderData.remark1 }}</el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card mt30">
      <div slot="header" class="card-header clearfix">
        <h5 class="title pull-left">住宿信息</h5>
      </div>
      <div class="meeting-info">
        <el-row>
          <el-col :span="12"><strong>酒店名称：</strong>{{ renderData.hotelName }}</el-col>
          <el-col :span="12"><strong>酒店地址：</strong>{{ renderData.hotelLocation }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="8"><strong>入住日期：</strong>{{ renderData.inTime2 }}</el-col>
          <el-col :span="8"><strong>离店日期：</strong>{{ renderData.outTime2 }}</el-col>
          <el-col :span="8"><strong>入住时长：</strong>{{ renderData.duration }}</el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col :span="24"><strong>其他备注：</strong>{{ renderData.remark2 }}</el-col>
        </el-row>
        <el-divider />
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  meetingScheduleShow
} from '@/api/meetings'

export default {
  name: 'MeetingScheduleShow',
  data() {
    return {
      meetingId: '',
      scheduleId: '',
      renderData: {}
    }
  },
  watch: {
    $route: {
      handler(route) {
        this.meetingId = route.params && route.params.id
      },
      immediate: true
    }
  },
  created() {
    this.meetingId = this.$route.params && this.$route.params.id
    this.scheduleId = this.$route.params && this.$route.params.scheduleId
    this.fetchData(this.meetingId, this.scheduleId)
  },
  methods: {
    fetchData(meetingId, id) {
      meetingScheduleShow({
        meetingId,
        id
      }).then(response => {
        const { data } = response
        // console.log(data)
        this.renderData = data
      }).catch(err => {
        console.log(err)
      })
    },
    toScheduleEdit() {
      this.$router.push(`/meetings/list/${this.meetingId}/schedule/${this.scheduleId}/edit`)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 40px 140px;
}
</style>
